<template>
    <div class="mall_edit">
        <!-- <div class="mall_edit_title">{{ $t('my.编辑资料') }}</div> -->
        <div class="mall_form">
            <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item :label="$t('mall.商户名称')" prop="name">
                    <el-input v-model="ruleForm.name" :placeholder="$t('mall.请输入商城名称')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('mall.商户地址')" prop="address">
                    <el-input v-model="ruleForm.address" :placeholder="$t('mall.请输入商城地址')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('mall.电话号码')" prop="phone">
                    <el-input v-model="ruleForm.phone" :placeholder="$t('mall.请输入电话号码')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('mall.邮箱号')" prop="email">
                    <el-input v-model="ruleForm.email" :placeholder="$t('mall.请输入邮箱号')"></el-input>
                </el-form-item>

                <el-form-item :label="$t('mall.上传商城背景图片')" prop="bg_image">
                    <el-upload class="avatar-uploader" :action="upload_url" :show-file-list="false"
                        accept=".jpg,.jpeg,.png,.gif,.bmp,.webp" :on-success="uploadSuccess"
                        :before-upload="uploadBefore">
                        <img v-if="ruleForm.bg_image" :src="ruleForm.bg_image" class="mall_bg_img">
                        <img v-else src="@/assets/image/upload.png" class="mall_bg_img">
                    </el-upload>
                </el-form-item>
            </el-form>
        </div>
        <div class="submit" @click="submit">保存</div>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    props: {
        shop_id: {
            type: [Boolean, String, Number],
            default: false
        }
    },
    data() {
        const imageValidator = (rule, value, callback) => {
            if (!value) {
                callback(new Error(`${this.$t('mall.上传商城背景图片')}`));
            } else {
                callback();
            }
        };
        return {
            upload_url: window.BASE_URL + 'common/upload',

            ruleForm: {
                name: '',
                address: '',
                phone: '',
                email: '',
                bg_image: ''
            },
            rules: {
                name: [
                    { required: true, message: this.$t('mall.请输入商城名称'), trigger: 'blur' }
                ],
                address: [
                    { required: true, message: this.$t('mall.请输入商城地址'), trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: this.$t('mall.请输入电话号码'), trigger: 'blur' }
                ],
                email: [
                    { required: true, message: this.$t('mall.请输入邮箱号'), trigger: 'blur' }
                ],
                bg_image: [
                    { validator: imageValidator, trigger: 'blur' }
                ]
            }
        };
    },
    computed: {
        ...mapState({
            user: state => state.user
        })
    },
    created() {
        if (this.shop_id) this.getInfo();
    },
    methods: {
        async getInfo() {
            let res = await this.$api.shopApi.shopInfo({
                user_id: this.user.user_id
            });
            this.ruleForm = res.shop_info;

            let bg_image = res.shop_info.bg_image;
            if (!bg_image) return;
            this.fileList = [{
                status: "success",
                message: "",
                url: bg_image
            }]
        },
        submit() {
            this.$refs['ruleForm'].validate(async (valid) => {
                if (!valid) return;
                await this.$api.shopApi.publishShop(this.ruleForm);
                this.$message({
                    message: this.$t('mall.修改成功'),
                    type: 'success'
                });
                this.$emit("ok", "edit")
            });
        },

        uploadSuccess(response, file, fileList) {
            this.ruleForm.bg_image = response.data.fullurl;
        },
        uploadBefore(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error(`${this.$t('最大')}2MB!`);
            }
            return isLt2M;
        }
    }
}
</script>
<style lang="scss" scoped>
.mall_edit {
    width: 500px;
    padding: 0 12px;
    box-sizing: border-box;

    .mall_edit_title {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        color: #333333;
    }

    .mall_form {
        margin-top: 24px;



        &:deep(.el-form-item) {
            margin-bottom: 8px;

            .el-form-item__label {
                font-size: 14px;
                color: #333333;
            }

            .el-input__inner {
                height: 52px;
                // background: #F5F5F5;
            }
        }



        .mall_bg_img {
            width: 120px;
            height: 120px;
        }

    }

    .submit {
        width: 428px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
        color: #FFFFFF;
        background: linear-gradient(270deg, #4488FF 0%, #2BBCFF 100%);
        border-radius: 8px 8px 8px 8px;
        margin: 0 auto;
        margin-top: 60px;
    }
}
</style>